<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒模型示例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            padding: 20px;
            font-family: Arial, sans-serif;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
        }

        .demo-box {
            margin: 20px;
            border: 5px solid #3498db;
            padding: 20px;
            background-color: #eef2f7;
        }

        /* 标准盒模型 */
        .content-box {
            box-sizing: content-box;
            width: 200px;
            height: 100px;
            padding: 20px;
            border: 5px solid #e74c3c;
            margin: 20px;
            background-color: #fff;
        }

        /* IE盒模型 */
        .border-box {
            box-sizing: border-box;
            width: 200px;
            height: 100px;
            padding: 20px;
            border: 5px solid #2ecc71;
            margin: 20px;
            background-color: #fff;
        }

        /* 外边距合并示例 */
        .margin-collapse {
            background-color: #fff;
            margin: 20px 0;
        }

        .margin-collapse .box1,
        .margin-collapse .box2 {
            height: 50px;
            background-color: #f1c40f;
            margin: 20px 0;
        }

        /* 防止外边距合并 */
        .prevent-collapse {
            overflow: hidden; /* 创建BFC */
            background-color: #fff;
        }

        .description {
            margin: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 4px;
            line-height: 1.6;
        }

        .highlight {
            color: #e74c3c;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>CSS盒模型详解</h1>
        
        <section>
            <h2>1. 标准盒模型（content-box）</h2>
            <div class="description">
                在标准盒模型中，width和height指的是内容区域的宽高。
                padding和border会增加元素的实际尺寸。
            </div>
            <div class="demo-box">
                <div class="content-box">
                    这是标准盒模型示例
                </div>
                <p class="description">
                    实际宽度 = width + padding-left + padding-right + border-left + border-right<br>
                    <span class="highlight">200px + 20px + 20px + 5px + 5px = 250px</span>
                </p>
            </div>
        </section>

        <section>
            <h2>2. IE盒模型（border-box）</h2>
            <div class="description">
                在IE盒模型中，width和height包含了padding和border的尺寸。
                增加padding和border不会改变元素的实际尺寸。
            </div>
            <div class="demo-box">
                <div class="border-box">
                    这是IE盒模型示例
                </div>
                <p class="description">
                    实际宽度 = width（已包含padding和border）<br>
                    <span class="highlight">始终保持200px</span>
                </p>
            </div>
        </section>

        <section>
            <h2>3. 外边距合并示例</h2>
            <div class="description">
                垂直方向的margin会发生合并，取较大值作为实际间距。
            </div>
            <div class="demo-box">
                <div class="margin-collapse">
                    <div class="box1">Box 1 (margin: 20px 0)</div>
                    <div class="box2">Box 2 (margin: 20px 0)</div>
                </div>
                <p class="description">
                    两个盒子之间的实际间距：<span class="highlight">20px</span>（而不是40px）
                </p>
            </div>
        </section>

        <section>
            <h2>4. 防止外边距合并</h2>
            <div class="description">
                创建BFC（Block Formatting Context）可以防止外边距合并。
            </div>
            <div class="demo-box">
                <div class="prevent-collapse">
                    <div class="box1">Box 1 (margin: 20px 0)</div>
                    <div class="box2">Box 2 (margin: 20px 0)</div>
                </div>
                <p class="description">
                    两个盒子之间的实际间距：<span class="highlight">40px</span>
                </p>
            </div>
        </section>
    </div>
</body>
</html>
